<template>
  <div
    class="tabs-box flex-wrap"
    :class="{ bgClass, 'flex-center': align === 'center' }"
  >
    <ul class="tabs-ul flex-center" @click="selectItem">
      <li
        class="item-box"
        :class="{ itemClass, 'item-box-active': +tabIndex === +index }"
        v-for="(item, index) in tabs"
        :data-index="index"
        :key="index"
      >
        {{ item[labelKey] }}
      </li>
      <!-- 为了能够自定义样式，所以不用改伪元素实现 -->
      <li class="active-line" :class="{ lineClass }"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'zlTabs',
  props: {
    // 盒子背景色
    bgClass: {
      type: String,
      default: ''
    },
    // tab 默认样式
    itemClass: {
      type: String,
      default: ''
    },
    // tab选中样式
    itemActiveClass: {
      type: String,
      default: ''
    },
    // 下划线样式
    lineClass: {
      type: String,
      default: ''
    },
    // tabs 数据
    tabs: {
      type: Array,
      default: () => [],
      require: true
    },
    // tab的label;
    labelKey: {
      type: String,
      default: 'label'
    },
    // tab的value;
    valueKey: {
      type: String,
      default: 'value'
    },
    align: {
      type: String,
      default: 'center'
    }
    // tab 选中项index
    // tabIndex:{
    //   type:[String,Number],
    //   default:0,
    // }
  },
  data() {
    return {
      tabIndex: 0
    }
  },
  computed: {
    value() {
      return this.tabs[this.tabIndex][this.valueKey]
    }
  },
  methods: {
    // 点击事件
    selectItem(e) {
      let currentDom = e.target
      if (!currentDom || currentDom.tagName !== 'LI') return
      let index = currentDom.getAttribute('data-index')
      this.tabIndex = index
      this.$emit('change', this.tabs[this.tabIndex][this.valueKey])
      this.setLineLocation()
    },
    // 计算底部滑块位置
    setLineLocation() {
      let lineDom = document.querySelector('.active-line')
      let liDoms = document.querySelectorAll('.item-box')
      let activeDom = liDoms[this.tabIndex]
      let lineDomWidth = lineDom.offsetWidth
      let offsetLeft = activeDom.offsetLeft
      let offsetWidth = activeDom.offsetWidth
      let dis = offsetLeft + offsetWidth / 2 - lineDomWidth / 2
      lineDom.style.transform = `translateX(${dis}px)`
      lineDom.style.transition = 'transform .1s ease'
    },
    setDefultIndex(index) {
      this.tabIndex = index
      this.setLineLocation()
    }
  },
  mounted() {
    this.setLineLocation()
  }
}
</script>

<style scoped>
.tabs-box {
  width: 100%;
  min-width: 1200px;
  height: 56px;
  background: #feddb1;
}

.tabs-ul {
  position: relative;
  height: 100%;
  width: auto;
}

.active-line {
  width: 40px;
  height: 4px;
  background: linear-gradient(135deg, #f94926 0%, #d93716 100%);
  border-radius: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.item-box {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #a59181;
  line-height: 24px;
  margin-left: 48px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.item-box-active {
  font-weight: bold;
  color: #4b2404;
}

.item-box:first-of-type {
  margin-left: 0;
}
</style>
